<template>
	<div class="like-goods">
		<!-- 猜你喜欢 -->
		<van-divider v-if="isTitle" :style="{ color: '#333', borderColor: '#ccc', padding: '0 16px' }">
			<van-icon name="like" class-prefix="icon-font-20 iconfont icon-hot" color="red" />猜你喜欢
		</van-divider>
		<!-- 商品列表 -->
		<van-list v-model="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad">
			<van-row class="goods-list">
				<van-col span="12" v-for="(item,index) in goodsData" :key="index" @click="goDetail(index)" class="goods-wrapper">
					<div class="goods-item">
						<div class="goods-pic">
							<img :src="item.hd_thumb_url" />
						</div>
						<div class="goods-info">
							<div class="goods-title">{{item.goods_name}}</div>
							<div class="goods-price">
								<span>￥{{item.price/100}}</span>
								<s>￥{{item.quantity/100}}</s>
							</div>
							<div class="goods-num">{{item.sales_tip}}</div>
							<!-- 下单图标 -->
							<div class="buy-icon">
								<van-icon name="cart-o" color="#fff" size=".5rem" />
							</div>
						</div>
					</div>
				</van-col>
			</van-row>
		</van-list>
	</div>
</template>

<script>
	export default {
		props: {
			isTitle: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				loading: false,
				finished: false,
				goodsData: []
			};
		},
		created() {
			this.getLikeGoodsData();
		},
		methods: {
			// 商品上拉刷新
			onLoad() {
				setTimeout(() => {
					this.goodsData.push({
						hd_thumb_url: "https://t00img.yangkeduo.com/goods/images/2020-06-08/7d443435b1eb0d0d320faad194d9a692.jpeg",
						goods_name: "南昌拌粉速食正宗调料包江西特色家乡小吃盒装江西拌粉米粉早餐吃",
						price: 583,
						quantity: 3990,
						sales_tip: "已拼10万+件"
					}, {
						hd_thumb_url: "https://t00img.yangkeduo.com/goods/images/2019-10-07/c332de69-7c42-491c-8e7d-b252f17f5f71.jpg",
						goods_name: "植护40包/10包4层原木纸巾抽纸批发整箱餐巾纸家用面巾卫生纸",
						price: 990,
						quantity: 6900,
						sales_tip: "已拼10万+件"
					}, {
						hd_thumb_url: "https://img.pddpic.com/mms-material-img/2020-07-21/2f9ac181-75c7-456e-88a7-8f318373cf8c.jpg.a.jpeg",
						goods_name: "咸蛋黄麦芽饼网红黑糖麦芽夹心饼干袋装茶点零食焦糖饼干台湾风味",
						price: 850,
						quantity: 2000,
						sales_tip: "已拼10万+件"
					}, {
						hd_thumb_url: "https://t00img.yangkeduo.com/goods/images/2020-07-10/6dec109a81f38b0a40a989c06d1dd53e.jpeg",
						goods_name: "植护正品机洗洗衣液香味持久留香袋装批发价薰衣草味一整箱家庭装",
						price: 1490,
						quantity: 5999,
						sales_tip: "已拼10万+件"
					}, {
						hd_thumb_url: "https://t00img.yangkeduo.com/goods/images/2020-07-29/45cd60faacf6183842a790afa255d1ec.jpeg",
						goods_name: "10本装便利贴便签纸N次贴可爱小清新便签本彩色便条纸贴纸告示贴",
						price: 180,
						quantity: 8000,
						sales_tip: "已拼5万+件"
					}, {
						hd_thumb_url: "https://t00img.yangkeduo.com/goods/images/2020-07-29/28719dc6454025a66739ca8652101c2e.jpeg",
						goods_name: "洗衣肥皂盒带盖大号卫生间沥水个性创意学生宿舍便携香皂盒双层",
						price: 260,
						quantity: 2900,
						sales_tip: "已拼10万+件"
					}, {
						hd_thumb_url: "https://t00img.yangkeduo.com/goods/images/2020-03-13/1ee97cc3-b039-4897-b095-8290b12a19e4.jpg",
						goods_name: "阳光森林心相印洗衣液正品香味持久留香整箱袋装批发家用家庭装",
						price: 159,
						quantity: 2990,
						sales_tip: "已拼5698件"
					}, {
						hd_thumb_url: "https://t00img.yangkeduo.com/goods/images/2020-06-22/8f7a55562bb34ea44c601cae702dde0e.jpeg",
						goods_name: "(顺丰包邮)水蜜桃5斤装新鲜水果桃子当季整箱包邮孕妇脆甜毛桃",
						price: 990,
						quantity: 3200,
						sales_tip: "已拼8.3万+件"
					}, {
						hd_thumb_url: "https://img.pddpic.com/mms-material-img/2020-07-03/42d7aa09-88ac-4151-a27c-4ff3effd7cc3.jpeg",
						goods_name: "一次性口罩防尘口罩工业粉尘透气防飞沫学生小孩儿童三层鼻罩成人",
						price: 372,
						quantity: 8800,
						sales_tip: "已拼10万+件"
					}, {
						hd_thumb_url: "https://t00img.yangkeduo.com/goods/images/2020-07-28/8d792bbe737580d5ce39cbf16d45cd83.jpeg",
						goods_name: "儿童婴儿湿巾纸新生儿手口专用湿纸巾3/5/10大包带盖成人整箱批发",
						price: 1390,
						quantity: 4500,
						sales_tip: "已拼10万+件"
					});
					this.loading = false;
					if (this.goodsData.length > 30) {
						this.finished = true;
					}
				}, 2000);
			},
			// 请求获取商品数据
			getLikeGoodsData() {
				this.$api.homeData.likeGoods().then(({
					data
				}) => {
					this.goodsData = data;
				});
			},
			// 跳转到商品详细页
			goDetail(index) {
				const goods_id = this.goodsData[index].goods_id;
				this.$toast.loading({
					message: "加载中...",
					forbidClick: true,
					loadingType: "spinner"
				});
				setTimeout(() => {
					this.$toast.clear()
					this.$router.push({
						name: "detail",
						query: {
							goods_id: goods_id
						}
					});
				}, 500)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.like-goods {
		.goods-list {
			background-color: #f4f4f4;
			padding: 5px;

			.goods-wrapper {
				padding: 5px;
				overflow: hidden;

				.goods-item {
					background-color: #fff;
					box-shadow: 3px 3px 3px rgba($color: #000000, $alpha: 0.1);
					border-radius: 3px;

					.goods-pic {
						img {
							width: 100%;
							border-radius: 3px 3px 0 0;
						}
					}

					.goods-info {
						position: relative;
						padding: 5px;

						// 购买图标
						.buy-icon {
							position: absolute;
							right: 5px;
							bottom: 5px;
							width: 26px;
							height: 26px;
							background: linear-gradient(to bottom, #f06c7a 0%, #f06c7a 100%);
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;
						}

						.goods-title {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.goods-price {
							padding: 5px 0;

							span {
								color: red;
								font-size: 18px;
								font-weight: bold;
								margin-right: 5px;
							}

							s {
								color: #bbb;
							}
						}

						.goods-num {
							color: #bbb;
						}
					}
				}
			}
		}
	}
</style>
